<template>
	<!-- 司机监督一览：-->
	<div class="my-approval-container">
		<nav-bar title="司机监督一览" :custom-back="true" />
		<div class="driverSupervision-container">
			<div class="calendar-tit ">
				<span v-if="!show" style="color: #fff;">1</span>
				<span class="back-today f24" v-if="show" v-on:click="backTodayTap">回到今天</span>
			</div>
			<!-- 日历 -->
			<van-calendar id="calendar" ref="calendar" :show-subtitle="false" :show-title="false" color="#409EFF"
				:row-height="40" :poppable="false" :show-confirm="false" :style="{ height: '380px' }" class="calendar"
				:readonly="false" :min-date="minDate" v-on:select="calendarSelect" row-height="60" :show-week="false" />
			<!-- 司机状态显示 -->
			<div class="num-con">
				<div class="num-item" v-on:click="goDetail" data-id="1">
					<span>出车/预约出车：</span>
					<span>{{num1}}人</span>
				</div>
				<div class="num-item" v-on:click="goDetail" data-id="2">
					<span>请假：</span>
					<span>{{num2}}人</span>
				</div>
				<div class="num-item" v-on:click="goDetail" data-id="3">
					<span>值班：</span>
					<span>{{num3}}人</span>
				</div>
				<div class="num-item" v-on:click="goDetail" data-id="4">
					<span>维保：</span>
					<span>{{num4}}人</span>
				</div>
				<div class="num-item" v-on:click="goDetail" data-id="5">
					<span>空闲：</span>
					<span>{{num5}}人</span>
				</div>
				<div class="num-item" v-on:click="goDetail" data-id="6">
					<span>待审批：</span>
					<span>{{num6}}人</span>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import utils from "@/utils/utils.js"
	import NavBar from '@/components/NavBar'
	export default {
		name: "DriverSupervision",
		components: {
			NavBar
		},
		data() {
			return {
				num1: 1, //出车
				num2: 2, //请假
				num3: 3, //值班
				num4: 4, //维保
				num5: 5, //空闲
				num6: 6, //待审批
				minDate: new Date(2023, 0, 1),
				curDateStr: "",
				show: false
			}
		},
		computed: {

		},
		methods: {
			//返回到今天
			backTodayTap() {
				console.log("返回到今天")
				this.$refs.calendar.reset()
				this.formatDateFunction()
				this.driverStateCountByDay()
				this.show = false;
			},
			//选择日期
			calendarSelect(e) {
				this.formatDateFunction(e)
				this.driverStateCountByDay()

				let today =new Date()
				let year = today.getFullYear()
				let month = today.getMonth() + 1
				let day = today.getDate();
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				let todayStr = `${year}-${month}-${day}`
				console.log(this.curDateStr , today)
				if (this.curDateStr !== todayStr) {
					this.show = true;
				}
			},
			//格式化日期
			formatDateFunction(val) {
				let date = val ? new Date(val) : new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate();
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				this.curDateStr = `${year}-${month}-${day}`;
			},
			//获取司机的状态
			driverStateCountByDay() {
				console.log("获取司机的状态", this.curDateStr)

			},
			goDetail(e) {
				let id = e.currentTarget.dataset.id;
				//页面跳转到详情
				console.log("页面跳转到详情", id)
				this.$router.push("/driverSupervisionList?curDateStr="+this.curDateStr+"&id="+id)
			},

		},
		created() {

		},
		mounted() {
			//选择日期为当前日期，获取司机状态数据
			this.calendarSelect(new Date());
		},
		beforeDestroy() {

		}
	}
</script>




<style lang="scss" scoped>
	/* 容器样式 */
	.my-approval-container {
		background: #fff;
		height: calc(100vh - 50px);
		display: flex;
		flex-direction: column;
	}

	/* pages/driverManagement/driverSupervision/index.wxss */

	.driverSupervision-container {
		padding: 20px 40px;
		height: 100%;
		margin-top:0px ;
	}

	/*回到今天*/
	.calendar-tit {
		margin-bottom: 0px;
		padding: 10px 0;
		height: 22px;
		width: 100%;
		position: fixed;
		background: #fff;
		left: 1px;
		top: 15px; 
	}

	.van-calendar__selected-day {
		height: 80px !important;
	}

	.num-con {
		margin: 20px 0;
		background: #fff;
	}

	.num-item {
		border: 1px solid rgba(153, 153, 153, 1);
		border-radius: 10px;
		font-size: 16px;
		line-height: 40px;
		padding: 0 20px;
		margin-bottom: 20px;
		text-align: left;
	}

	/* .num-item.active{
	  background: #409EFF;
	  color: #fff;
	} */
</style>